<template>
	<view class="out-box">
		<!-- 中间分类 -->
		<view class="nav">
			<view class="nav_main">
				<view class="nav_main_item" @tap="show_shop(0)">
					<span :class="display_store == 0 ? 'nav_main_item_span ative':'nav_main_item_span'">转让</span>
					<view class="nav_main_item_bottom" v-show="display_store == 0"></view>
				</view>
				<view class="nav_main_item" @tap="show_shop(2)">
					<span :class="display_store == 2 ? 'nav_main_item_span ative':'nav_main_item_span'">求租</span>
					<view class="nav_main_item_bottom" v-show="display_store == 2"></view>
				</view>
			</view>
		</view>


		<!-- 最下方的数据展示 -->
		<view class="main">
			<view class="main_lists" v-if="display_store == 0">
				<scroll-view class="scroll-two" lower-threshold="20" scroll-y="true" @scrolltolower="load">
				<view v-for="item,index in transfer_list.value" :key="index">
					<view class="main_lists_item" @tap="todetails(item)">
						<view class="item_left">
							<image class="item_left_img" :src=item.cover_img></image>
						</view>
						<view class="item_right">
							<view class="item_right_one"><span class="spanone"
									v-show="item.is_swerve==1">(急转)</span>{{item.title}}</view>
							<span
								class="item_right_two">{{item.city+ ' | '+item.county+' | '+item.shop_area+"m²"}}</span><br>
							<view class="item_right_identifying"  v-if="item.feature_label != null&&item.feature_label != '' ">
								<view v-for="item1,index1 in item.feature_label.split(',')" :key="index1">
									<view class="item_right_identifying_item">{{ item1}}</view>
								</view>
							</view>
							<span
								class="item_right_three">{{ ( item.transfer_fee == '' || item.transfer_fee == null ||item.transfer_fee == '面议' || item.transfer_fee =='null') ? '面议': item.transfer_fee + '/月' }}</span>
							<span class="item_right_five">更新于:
								{{ item.update_time==null?item.create_time:item.update_time }}</span>
						</view>
					</view>
					<view class="right_center">
						<view class="item_right_one" style="margin-left: 580rpx;" v-if="item.is_vip==0" @tap="extend_show(1,item.id)">推广展示</view>
						<view class="item_right_one" style="margin-left: 500rpx;width: 230rpx;" v-else-if="item.is_vip==1 &&item.is_expired == 0">{{'置顶剩余:' + item.formatter}}</view>
						<!-- <view class="item_right_two" @tap="editInfo(1,item)">编辑</view> -->
					</view>
					<view class="item_hr"></view>
				</view>
				
				<view class="show_Loading" v-if="page_information.showLoading">{{page_information.showtext}}</view>
			</scroll-view>
			</view>
			<!-- 展示出租列表 -->
			<view class="main_listtwo" v-if="display_store == 2">
				<scroll-view class="scroll-two" lower-threshold="20" scroll-y="true" @scrolltolower="loadMoretwo">
				<view v-for="item,index in rent_list.value" :key="index">
					
					<view class="lists_item">
						<view class="item_top">
							<view class="item_left_one"><span class="spanone"
									v-show="item.is_swerve==1">（急租）</span>{{ item.title }}</view>
							<view class="item_right_identifying" v-if="item.feature_label != null && item.feature_label != '' ">
								<view v-for="item1,index in item.feature_label.split(',')" :key="index">
									<view class="item_right_identifying_item">{{ item1}}</view>
								</view>
							</view>
							<view class="item_left_two">联系人：{{ item.name }}</view>
							<view class="item_left_three">
								<view class="ipone">联系电话：{{item.phone}}</view>
								<view class="time">更新于：{{ item.update_time==null?item.create_time:item.update_time }}
								</view>
							</view>
						</view>
					</view>
					<view class="item_bottom">
						<view class="item_right_one" style="margin-left: 580rpx;" v-if="item.is_vip==0" @tap="extend_show(2,item.id)">推广展示</view>
						
						<view class="item_right_one" style="width: 230rpx;" v-else-if="item.is_vip==1 &&item.is_expired == 0">{{'置顶剩余:' + item.formatter}}</view>
						<!-- <view class="item_right_two" @tap="editInfo(2,item)">编辑</view> -->
					</view>
					<view class="item_hr"></view>
				</view>
				<view class="show_Loading" v-if="page_information.showLoadingtwo">{{page_information.showtexttwo}}</view>
			</scroll-view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onGotApiData
	} from '../../util/api.js'
	import {
		ref,
		reactive,
		onBeforeMount,
		onMounted
	} from 'vue'
	//获取上级页面带的参数
	const props = defineProps({
		userId: String,
	});


	//  * 在组件渲染之前执行
	 onBeforeMount(() => {


		const date1 = new Date("2023-08-24 16:50:16");
		const date2 = new Date("2023-08-21 16:50:16");

		const timeDiff = date1.getTime() - date2.getTime();

		// 计算相差的天数
		const daysDiff = Math.floor(timeDiff / (1000 * 60 * 60));

		console.log("shijian",daysDiff);


		console.log('组件准备渲染');
			//开发时用的,后面换成props.userId
		page_information.user_id = uni.getStorageSync('user_id');
		//查询转让列表
		transfer_post();

	})
	
	//  * 在组件渲染完成后执行
	onMounted(() => {
		console.log('组件已经渲染完毕');
	})

	// 转让店鋪列表
	let transfer_list = reactive([]);
	// 求租店鋪列表
	let rent_list = reactive([]);
	// 本页面信息
	let page_information = reactive({
		user_id:'',
		// 最新店铺的页数
		pageone: 1,
		// 求租店铺的页数
		pagetwo: 1,
		// 出租店铺上拉加载
		showLoading: false,
		// 求租店铺上拉加载
		showLoadingtwo: false,
		// 加载文字
		showtext: '加载更多店铺中...',
		// 加载文字
		showtexttwo: '加载更多店铺中...',
		// 店铺转让总条数
		shop_assemble: 0,
		// 当前条数
		objectCount: null,
		// 求租总条数
		rent_assemble: 0,
		// 当前条数
		rent_count: null
	})

	// 控制展示的变量
	const display_store = ref(0)
	//第一次点击求租标识
	let isFirstRentClick = ref(true);
	// 点击切换展示列表
	const show_shop = (num) => {

		display_store.value = num
		if (isFirstRentClick.value) {
			rent_post();
		}
		if (num == 2) {
			isFirstRentClick.value = false
		}
	}

	// 下拉刷新店铺转让页面
	const load = () => {
		
		console.log("buchulai1？")
      // 判断是否正在加载中，避免重复触发加载
      if (page_information.showLoading) {
        return;
      }
	     // 显示加载中提示
      page_information.showLoading = true
	//   计算当前数组有多少对象
	  page_information.objectCount = transfer_list.value.filter(item => typeof item === 'object').length;
	//   如果已加载全部直接返回
	  if( page_information.objectCount >= page_information.shop_assemble){
		console.log("比较",page_information.objectCount,page_information.shop_assemble)
		page_information.showtext = '没有更多数据了...'
			setTimeout(()=>{
					// 隐藏加载中提示
					page_information.showLoading = false; 
			},2000)
		return
	  }

	//   每次请求页数+1
	  page_information.pageone = page_information.pageone + 1
      // 模拟异步请求数据
      setTimeout(function(){
        // 获取到的新数据
		let params = reactive({
			page : page_information.pageone,
			size: 10,
			user_id: page_information.user_id
		})
		console.log("params",params)
		onGotApiData('/api/app/shop_transfer/page_list','GET',params,goto_lists)

        // 将新数据追加到数据列表中
      }, 1000);
		// 会员页面产品请求的结果
		const goto_lists = (result) => {
			console.log('分页列表',result)
			transfer_list.value.push(...result.list)
			console.log('goto_lists请求成功',transfer_list.value)
			// 隐藏加载中提示
			page_information.showLoading = false; 
		}
	}

	
	// 下拉刷新求租页面
	const loadMoretwo = () => {
      // 判断是否正在加载中，避免重复触发加载
      if (page_information.showLoadingtwo) {
        return;
      }
	     // 显示加载中提示
		 page_information.showLoadingtwo = true
	//   计算当前数组有多少对象
	page_information.rent_count = rent_list.value.filter(item => typeof item === 'object').length;
	//   如果已加载全部直接返回
	  if( page_information.rent_count >= page_information.rent_assemble){
		console.log("比较",page_information.rent_count,page_information.rent_assemble)
		page_information.showtexttwo = '没有更多数据了...'
			setTimeout(()=>{
					// 隐藏加载中提示
					page_information.showLoadingtwo = false; 
			},2000)
		return
	  }

	//   每次请求页数+1
	  page_information.pagetwo = page_information.pagetwo + 1
      // 模拟异步请求数据
      setTimeout(function(){
        // 获取到的新数据
		let params = reactive({
			page : page_information.pagetwo,
			size: 10,
			user_id: page_information.user_id
		})
		console.log("params",params)
		onGotApiData('/api/app/shop_rent/page_list','GET',params,goto_lists)

        // 将新数据追加到数据列表中
      }, 1000);
		// 会员页面产品请求的结果
		const goto_lists = (result) => {
			console.log('分页列表',result)
			rent_list.value.push(...result.list)
			console.log('goto_lists请求成功',rent_list.value)
			// 隐藏加载中提示
			page_information.showLoadingtwo = false; 
		}
	}


	/**
	 * 请求转让列表接口
	 */
	const transfer_post = () => {
		let params = reactive({
			page: page_information.pageone,
			size: 10,
			user_id:page_information.user_id 
		})
		console.log("params", params)
		onGotApiData('/api/app/shop_transfer/page_list', 'GET', params, transfer_value)
	}
	/**
	 * 转让列表请求的结果
	 */
	const transfer_value = (result) => {
		transfer_list.value = result.list
		// 总条数
		page_information.shop_assemble = result.total
		console.log('lists_value请', result.total)
	}
	/**
	 * 求租列表请求
	 */
	const rent_post = () => {
		let params = reactive({
			page: page_information.pagetwo,
			size: 10,
			user_id:page_information.user_id 
		})
		console.log("params", params)
		onGotApiData('/api/app/shop_rent/page_list', 'GET', params, rent_value)
	}
	const rent_value = (result) => {
		rent_list.value = result.list
		// 总条数
		page_information.rent_assemble = result.total
		console.log('lists_value请', result.total)
	}

	// 点击跳转到转店铺的详情
	const todetails = (item) =>{
		console.log("item",item)
		uni.navigateTo({
			url: '/pages/transfer/transfer?id=' + `${item.id}`,
		});
	}


	/**
	 * 推广展示
	 */
	const extend_show = (num, id) => {
		let url = ''
		url = "/api/app/shop_transfer/extend_show";
		if (num == 2) { //求租
		 url = "/api/app/shop_rent/extend_show";
		}
		let params = reactive({
			id: id,
			user_id: page_information.user_id 
		})
		onGotApiData(url, 'POST', params, (result) => {
			//code=200,提示推广展示成功
			//刷新列表
			if (num == 1) {
				transfer_post()
			} else {
				rent_post();
			}
		})
	}

	// 点击查看详情页面



	/**
	 * 编辑
	 * num 1:转让,2:求租
	 */
	const editInfo = (num, item) => {
		let obj = JSON.stringify(item)
		let toUrl = '/pages/release_transfer/release_transfer?obj=' + encodeURIComponent(obj);
		if (num == 2) {
			//跳转到求租编辑页
			toUrl = '/pages/release_hire/release_hire?obj=' + encodeURIComponent(obj);
		}
		uni.navigateTo({
			url: toUrl
		});
	}
</script>

<style lang="scss" scoped>
	.out-box {
		min-height: 100vh;
		width: 100vw;
		max-width: 750rpx;
		margin: 0 auto;
		overflow: hidden;
		background-color: rgb(236, 235, 235);
		width: 750rpx auto;

		// 上方三个导航栏
		.nav {
			width: 100%;
			height: 90rpx;
			background-color: rgb(236, 235, 235);
			position: fixed;
			// top: 90rpx;
			z-index: 999;

			// border: 1px solid black;
			.nav_main {
				width: 750rpx;
				height: 90rpx;
				background-color: rgb(251, 250, 250);
				// margin-top: 100rpx;
				// border-radius: 20rpx;
				// padding-top: 10rpx;
				// padding-bottom: 10rpx;
				margin: 0 auto;
				display: flex;
				justify-content: space-around;

				.nav_main_item {
					width: 180rpx;
					height: 90rpx;
					// background-color: pink;
					text-align: center;

					// padding-top: 10rpx;
					// border-bottom: 10rpx solid orange;
					.nav_main_item_span {
						line-height: 30px;
						font-size: 17px;
						font-weight: 400;
					}

					.ative {
						color: rgb(255, 114, 64);
					}

					.nav_main_item_bottom {
						width: 140rpx;
						height: 10rpx;
						background-color: rgb(255, 114, 64);
						margin-left: 20rpx;
						border-radius: 4rpx;
						box-shadow: 0 0 20rpx rgb(255, 114, 64);
					}
				}
			}
		}

		// 中间的内容
		.main {
			margin-top: 88rpx;
			width: 100%;
			// min-height: 60vh;
			font-family: '思源黑体';
			background-color: rgb(236, 235, 235);
			display: flex;
			justify-content: center;

			.main_lists {
				width: 750rpx;
				// height: 100rpx;
				// background-color: pink;
				background-color: #fff;

				.main_lists_item {
					width: 720rpx;
					height: 220rpx;
					background-color: #fff;
					margin: 0 auto;
					// margin-bottom: 20rpx;
					display: flex;

					// border-radius: 20rpx;
					.item_left {
						width: 200rpx;
						height: 200rpx;
						// border: 1px solid black;
						margin-left: 10rpx;

						// background-image: url(https://img.72qq.com/file/202007/24/aed12b08ae.jpg);
						// background-size: 100% 100%;
						.item_left_img {
							height: 200rpx;
							width: 200rpx;
							border-radius: 20rpx;

						}
					}

					.item_right {
						width: 500rpx;
						height: 200rpx;
						margin-left: 10rpx;

						// border: 1px solid black;
						.item_right_one {
							font-size: 34rpx;
							margin-left: 15rpx;
							margin-top: 15rpx;
							font-weight: 600;
						}

						.item_right_two {
							font-size: 24rpx;
							margin-left: 15rpx;
							line-height: 50rpx;
						}

						.item_right_identifying {
							width: 500rpx;
							height: 30rpx;
							display: flex;
							margin-top: 6rpx;

							// margin-bottom: 16rpx;
							// border: 1px solid black;
							.item_right_identifying_item {
								// width: 120rpx;
								height: 30rpx;
								font-size: 12px;
								font-weight: 500;
								line-height: 30rpx;
								padding-left: 5rpx;
								padding-right: 5rpx;
								color: rgba(255, 141, 26, 1);
								margin-left: 14rpx;
								text-align: center;
								border: 1px solid rgba(255, 141, 26, 1);
								border-radius: 10rpx;
							}
						}

						.item_right_three {
							color: rgba(255, 87, 51, 1);
							font-size: 18px;
							margin-left: 10rpx;
							line-height: 80rpx;
						}

						.item_right_five {
							font-size: 12px;
							margin-left: 30rpx;
							color: rgb(163, 169, 175);
						}
					}
				}

				.right_center {
					width: 750rpx;
					height: 80rpx;
					border: 1px solid #F5F5F5;

					.item_right_one {
						height: 50rpx;
						//margin: 10rpx 0 10rpx 370rpx;
						background-color: rgba(255, 87, 51, 1);
						padding: 0 6rpx 0 6rpx;
						border-radius: 10rpx;
						color: rgba(255, 255, 255, 1);
						font-size: 26rpx;
						line-height: 50rpx;
						text-align: center;
						margin-right: 20rpx;
					}

					.item_right_two {
						width: 160rpx;
						height: 50rpx;
						//margin: 10rpx 0 10rpx 30rpx;
						background-color: rgba(166, 166, 166, 1);
						border-radius: 10rpx;
						color: rgba(255, 255, 255, 1);
						font-size: 26rpx;
						line-height: 50rpx;
						text-align: center;
						margin-right: 10rpx;
						position: absolute;
						top: 10rpx;
						right: 0;
					}
				}

				.item_hr {
					width: 700rpx;
					height: 2rpx;
					margin: 0 auto;
					border-top: 1px dashed rgba(207, 204, 204, 1);
				}
			}

			// 搜索店铺
			.main_listtwo {
				width: 750rpx;
				background-color: #fff;
				font-family: '思源黑体';

				.lists_item {
					width: 740rpx;
					height: 220rpx;
					background-color: #fff;
					margin: 0 auto;
					margin-bottom: 20rpx;
					display: flex;
					border-radius: 20rpx;

					.item_top {
						width: 740rpx;
						// height: 200rpx;
						// border: 1px solid black;
						margin-left: 10rpx;

						.item_left_one {
							width: 740rpx;
							// height: 60rpx;
							// background-color: pink;
							margin: 16rpx 0 0 20rpx;
							line-height: 60rpx;
							font-size: 32rpx;
							font-weight: 700;
							color: rgba(46, 46, 46, 1);

							.spanone {
								color: rgba(255, 87, 51, 1);
							}
						}

						.item_right_identifying {
							width: 720rpx;
							height: 30rpx;
							display: flex;
							margin: 10rpx 0 12rpx 10rpx;

							// border: 1px solid black;
							.item_right_identifying_item {
								// width: 120rpx;
								height: 30rpx;
								font-size: 12px;
								font-weight: 500;
								line-height: 30rpx;
								padding-left: 5rpx;
								padding-right: 5rpx;
								color: rgba(255, 141, 26, 1);
								margin-left: 14rpx;
								text-align: center;
								border: 1px solid rgba(255, 141, 26, 1);
								border-radius: 10rpx;
							}
						}

						.item_left_two {
							width: 740rpx;
							height: 44rpx;
							margin: 20rpx 0 0 20rpx;
							// background-color: pink;
							line-height: 44rpx;
							font-size: 26rpx;
							font-weight: 500;
							color: rgba(56, 56, 56, 1);
						}

						.item_left_three {
							width: 740rpx;
							height: 50rpx;
							display: flex;
							justify-content: space-between;
							font-size: 26rpx;
							margin: 10rpx 0 0 20rpx;
							font-weight: 500;

							.ipone {
								width: 300rpx;
							}

							.time {
								width: 240rpx;
								font-size: 24rpx;
								margin-right: 60rpx;
								color: rgba(143, 143, 143, 1);
								text-overflow: ellipsis;
								overflow: hidden;
								white-space: nowrap;

							}
						}
					}
				}

				.item_bottom {
					width: 740rpx;
					height: 80rpx;
					margin-left: 10rpx;

					// border: 1px solid black;
					font-size: 28rpx;
					color: #F5F5F5;
					line-height: 50rpx;
					text-align: center;
					display: flex;

					.item_right_one {
						// width: 150rpx;
						height: 50rpx;
						padding: 0 6rpx 0 6rpx;
						margin: 10rpx 0 0 470rpx;
						border-radius: 10rpx;
						background: rgba(255, 87, 51, 1);
					}

					.item_right_two {
						width: 150rpx;
						height: 50rpx;
						margin: 10rpx 0 0 20rpx;
						border-radius: 10rpx;
						background: rgba(166, 166, 166, 1);
					}
				}

				.item_hr {
					width: 700rpx;
					height: 2rpx;
					margin: 0 auto;
					border-top: 1px dashed rgba(207, 204, 204, 1);
				}
			}
		}
	.scroll-two{
		width: 100%;
		height: calc(100vh - 90rpx);
	}
	.show_Loading{
		height: 80rpx;
		text-align: center;
		// line-height: 80rpx;
	}
	}

</style>
